<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="WebRTC code samples">

  <title>Track grouping and splitting</title>
  <style>
    video {
      width: 300px;
      height: 200px;
      margin: 0 30px;
      border-style: solid;
      border-width: 2px;
      border-color: red;
    }
    
    audio {
      width: 300px;
      margin: 0 30px;
      border-style: solid;
      border-width: 2px;
      border-color: red;
    }
  </style>
</head>

<body>

<div id="container">

  <h1>Track grouping and splitting</h1>

  <video id="local_video" playsinline autoplay muted controls></video>
  <video id="local_display" playsinline autoplay muted controls></video>
  <br/>
  <video id="remote_video" playsinline autoplay muted controls></video>
  <video id="remote_display" playsinline autoplay controls></video>
  <br/>
  <audio id="local_audio" controls autoplay></audio>
  <audio id="remote_audio" controls autoplay></audio>

  <div>
    <button id="startVideo">Start Video</button>
    <button id="callVideo">Call Video</button>
    
    <button id="startDisplay">Start Display</button>
    <button id="callDisplay">Call Display</button>
    
    <button id="hangup">Hang Up</button>
  </div>

</div>

<script src="js/pc-media-split.js" async></script>

</body>
</html>
